<template>
	<view class="page">
		<u-navbar :is-back="true" :border-bottom="false" :is-fixed="true">
		</u-navbar>
		<view style="text-align: center;margin-bottom: 30rpx;">
			<image style="width: 200rpx;height: 200upx;margin-top: 20rpx;border-radius:20rpx"
				src="../../static/logo.jpeg"></image>
			<view style="font-size: 28rpx;margin-top: 20rpx;  font-weight: bold;">格物云商</view>
		</view>
		<view style="background-color: #fff; padding: 40rpx 60rpx; margin: 20rpx;border-radius: 20rpx;">
			<u-form :model="form" ref="uForm" label-align='center'>
				<u-form-item prop="mobile" left-icon="/static/phone.png"
					:left-icon-style="leftIconStyle">
					<u-input v-model="form.mobile" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item prop="verification_code" left-icon="/static/shield.png"
					:left-icon-style="leftIconStyle">
					<u-input v-model="form.verification_code" placeholder="请输入验证码" />
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
					</u-verification-code>
					<text @tap="getCode" style="color: #962a22; font-size: 28rpx;" slot="right">{{codeTips}}</text>
				</u-form-item>
			</u-form>
			<u-button @click="submit" shape="circle" :custom-style="customStyle">确认登录</u-button>

			<view class="footer">
				<text>登录即代表同意</text>
				<!-- 协议地址 -->
				<navigator url="/pages/auth/mimi" open-type="navigate" style="color: #962a22;">《隐私政策》</navigator>
				和
				<navigator url="/pages/auth/xieyi" open-type="navigate" style="color: #962a22;">《用户服务协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeTips: '获取验证码',
				form: {
					mobile: '',
					verification_code: '',
					code: ''
				},
				leftIconStyle: {
					width: '40rpx',
					height: '40rpx',
					'margin-top': '24rpx'
				},
				customStyle: {
					'background-color': '#962a22',
					'color': '#fff',
					'margin-top': '90rpx'
				},
				seconds: 60
			}
		},
		onLoad() {
			uni.setStorageSync('token', null)
			uni.setStorageSync('pageNum', 2)
		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			getCode() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				let __this = this;
				this.$u.api.sendSms({
					mobile: this.form.mobile,
					type: 'login'
				}).then(res => {
					uni.hideLoading()
					__this.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				})
			},

			submit() {
				uni.showLoading({
					title: '正在登录'
				})
				let __this = this;
				this.$u.api.mobileLogin({
					...this.form
				}).then(res => {
					uni.setStorageSync('token', res.token)
					uni.hideLoading()
					uni.$emit('updateUserInfo',{msg:'刷新用户信息'})
					__this.$u.toast('成功登录');
					__this.$refs.uCode.start();
					__this.$u.route({
						type: 'navigateBack',
						delta: uni.getStorageSync('pageNum') + 1
					})
				})
				
			}
		}
	}
</script>


<style lang="scss">
	@import "../../static/iconfont.css";

	.page {
		background-color: #fff;
		min-height: 100Vh;
		width: 100vw;
	}

	.footer {
		margin-top: 32upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	// .leftIconStyle {
	// 	width: 30rpx;
	// 	height: 30rpx;
	// 	align-items: center;
	// }
</style>
